<template>

    <el-dialog title="用户信息编辑" :visible="userEditShow" @close="dialogClose" width="40%">

        <el-form :model="ruleForm" status-icon :rules="rules" ref="userEdit" label-width="auto" class="demo-ruleForm">
            <el-form-item label="用户名：" prop="userID">
                <el-input type="text" v-model="ruleForm.userID" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名：" prop="userName">
                <el-input type="text" v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机：" prop="tel">
                <el-input type="number" v-model="ruleForm.tel" ></el-input>
            </el-form-item>
            <el-form-item label="状态：" prop="state">
                <el-radio-group v-model="ruleForm.state">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="角色：" prop="role">
                <el-radio-group v-model="ruleForm.role">
                    <el-radio label="角色1"></el-radio>
                    <el-radio label="角色2"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" :rows="4" v-model="ruleForm.remarks">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>
<script>
import { number } from 'echarts';
export default {
    name: 'useredit',
    data () {
        return {
            ruleForm: {
                userID: '',
                userName: '',
                email: '',
                tel: '',
                state: '',
                role: '',
                remarks: ''
            },
            rules: {
                userID: [
                    { required: true, message: ' ', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                email: [
                    { required: false, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                state: [
                    { required: true, message: '请选择目前状态', trigger: 'change' }
                ],
                role: [
                    { required: true, message: '请确认角色', trigger: 'change' }
                ],
            }
        };

    },

    props: {
        userEditShow: {
            type: Boolean
        },
        record: {
            type: Object
        }
    },
    methods: {

        submitForm () {
            this.$refs.userEdit.validate((valid) => {
                if (valid) {
                    this.$emit('dialogClose')
                }
                else {
                    return
                }
            });
        },

        // 重置
        // resetForm (formName) {
        //     this.$refs[formName].resetFields();
        // },
        dialogClose () {
            this.$emit('dialogClose')
            // this.liveAddShow=false
        }
    },

    mounted () {
        this.ruleForm = this.record;
    }

}
</script>
<!-- <style lang="less" scoped>

</style> -->